<script setup lang="ts">
import {ref, onMounted, watch} from 'vue'
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

import dayjs, {Dayjs} from 'dayjs';

interface ChartOptions {
  xAxis: string[];
  totalOrder: number[];
  pendingOrder: number[];
  processedOrder: number[];
}
//订单统计数据
const orderCounts = ref({
  total: 0,
  pending: 0,
  processed: 0,
  salesperson: 0,
})

//订单趋势
const statisticOrderPicker = ref<[Dayjs, Dayjs]>([
  dayjs(),
  dayjs().add(15, 'day'),
])
//订单趋势统计
const order_trend = ref<HTMLElement | null>(null);
const OrderTrendOptions = ref<ChartOptions>({
  xAxis: [],
  totalOrder: [],
  pendingOrder: [],
  processedOrder: [],
})
const iniOrderTrend = () => {
  const myChart = echarts.init(order_trend.value);
  const option: EChartsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      show: true,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        nameTextStyle: {
          fontWeight: 'bolder',
        },
        axisPointer: {
          type: 'shadow'
        },
        data: OrderTrendOptions.value.xAxis,
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    color: ['rgb(15, 111, 236)', 'rgb(250 200 88)', 'rgb(146 204 116)'],
    series: [
      {
        name: '总数量',
        type: 'bar',
        data: OrderTrendOptions.value.totalOrder,
        emphasis: {
          focus: 'none',
          itemStyle: {
            color: 'rgb(15, 111, 236)'
          }
        },
      },
      {
        name: '待办',
        type: 'bar',
        data: OrderTrendOptions.value.pendingOrder,
        emphasis: {
          focus: 'none',
          itemStyle: {
            color: 'rgb(250 200 88)'
          }
        },
      },
      {
        name: '已办理',
        type: 'bar',
        data: OrderTrendOptions.value.processedOrder,
        emphasis: {
          focus: 'none',
          itemStyle: {
            color: 'rgb(146 204 116)'
          }
        },
      },

    ]
  }
  option && myChart.setOption(option);
}
//查询订单趋势
const searchStatisticOrder = () => {
  getStatisticOrder()
}
//获取订单趋势数据
const getStatisticOrder = () => {
  const start = statisticOrderPicker.value[0]
  const end = statisticOrderPicker.value[1]
// 使用 dayjs 生成日期
  let currentDate = start.clone(); // 克隆开始日期以避免修改原始日期
  while (currentDate.isBefore(end) || currentDate.isSame(end)) {
    const formattedDate = currentDate.format('YYYY-MM-DD'); // 格式化日期
    // 将日期添加到 xAxis
    OrderTrendOptions.value.xAxis.push(formattedDate);
    // 生成随机的订单数
    const total = Math.floor(Math.random() * 100); // 随机生成总订单数
    const pending = Math.floor(Math.random() * total); // 随机生成待处理订单数（不超过总订单数）
    const processed = total - pending; // 已处理订单数
    // 将随机生成的订单数添加到相应的数组
    OrderTrendOptions.value.totalOrder.push(total);
    OrderTrendOptions.value.pendingOrder.push(pending);
    OrderTrendOptions.value.processedOrder.push(processed);
    currentDate = currentDate.add(1, 'day'); // 增加一天
  }
}

// 监视 myChartOptions 的变化
watch(OrderTrendOptions, (_newValue, _oldValue) => {
  iniOrderTrend(); // 数据变化时重新初始化图表
}, {deep: true}); // 深度监视


onMounted(() => {
  getStatisticOrder()
})

</script>
<template>
  <a-row :gutter="24">
    <a-col class="gutter-row" :span="8">
      <a-card style="background:#0f6fec;border: none;">
        <a-statistic :value="orderCounts.total"
                     :value-style="{ color: '#FFF' }"
                     style="margin-right: 50px">
          <template #title>
            <span style="color: #ffffff">总数量</span>
          </template>
        </a-statistic>
      </a-card>
    </a-col>
    <a-col class="gutter-row" :span="8">
      <a-card>
        <a-statistic title="待办" :value="orderCounts.pending" style="margin-right: 50px"/>
      </a-card>
    </a-col>
    <a-col class="gutter-row" :span="8">
      <a-card>
        <a-statistic title="已办理" :value="orderCounts.processed" style="margin-right: 50px"/>
      </a-card>
    </a-col>
  </a-row>
  <a-row :gutter="24" style="margin-top: 12px;">
    <a-col class="gutter-row" :span="24">
      <a-card class=""
              :headStyle="{borderBottom:'none',color:'rgba(0, 0, 0, 0.45)',fontSize:'14px',fontWeight:'inherit'}">
        <template #title>
          <div class="statistic-order">
            <div class="statistic-order-title">订单趋势</div>
            <div class="statistic-order-suffix">
              <a-space>
                <a-range-picker v-model:value="statisticOrderPicker"/>
                <a-button type="primary" @click="searchStatisticOrder">查询</a-button>
              </a-space>
            </div>
          </div>
        </template>
        <div ref="order_trend" style="height: 500px"></div>
      </a-card>
    </a-col>
  </a-row>
</template>
<style scoped lang="scss">
.statistic-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>